import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:fijkplayer/fijkplayer.dart';
import 'package:lazy_food/components/keepAliveWrapper/keep_alive_arapper.dart';
import 'package:lazy_food/models/recipe_model.dart';
import 'package:lazy_food/models/recommend_model.dart';
import 'package:lazy_food/util/string+.dart';

class TopView extends StatefulWidget {
  final RecommendFeedModel? model;

  TopView({Key? key, this.model}) : super(key: key);

  _TopViewState createState() => _TopViewState();
}

class _TopViewState extends State<TopView> {
  PageController _pageController = PageController(viewportFraction: 0.8);

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var totalPage = widget.model?.recipes?.length ?? 0;
    var vw = MediaQuery.of(context).size.width;
    var max = totalPage * (vw - 40) + 40;
    var dimension = max / (totalPage - 1);
    return LayoutBuilder(builder: (context, constraints) {
      return Container(
        height: 340,
        child: KeepAliveWrapper(
          child: PageView.builder(
            itemCount: widget.model?.recipes?.length ?? 0,
            scrollDirection: Axis.horizontal,
            controller: _pageController,
            itemBuilder: (context, index) {
              RecipeModel? data = widget.model?.recipes?[index];
              return Container(
                padding: EdgeInsets.only(top: 10, bottom: 10, left: 20),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _PlayerView(
                      width: constraints.maxWidth - 80,
                      height: 290,
                      imgUrl: data?.image.url_pattern ?? "",
                      isPlay: false,
                    ),
                    SizedBox(height: 5),
                    Text(
                      widget.model?.recipes?[index].name ?? "",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 18,
                      ),
                    )
                  ],
                ),
              );
            },
          ),
        ),
      );
    });
  }
}

class _PlayerView extends StatefulWidget {
  final double width;
  final double height;
  final String imgUrl;
  final bool isPlay;

  _PlayerView({
    Key? key,
    required this.width,
    required this.height,
    required this.imgUrl,
    this.isPlay = false,
  }) : super(key: key);

  _PlayerViewState createState() => _PlayerViewState();
}

class _PlayerViewState extends State<_PlayerView> {
  // FijkPlayer _player = FijkPlayer();
  String _imgUrl = "";

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // _player.setDataSource('asset:///assets/video/v1.mp4', autoPlay: false);
    // _player.setVolume(0);
    // _player.setLoop(0);

    _imgUrl = widget.imgUrl.toImage();
  }

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child:
          // widget.isPlay
          //     ? FijkView(
          //         player: _player,
          //         // width: widget.width,
          //         height: widget.height,
          //         fit: FijkFit(
          //           alignment: Alignment.topCenter,
          //           sizeFactor: -0.5,
          //           aspectRatio: -1.0,
          //         ),
          //         panelBuilder: (player, data, context, size, rect) {
          //           return Container();
          //         },
          //       )
          //     :
          Container(
        width: widget.width,
        height: widget.height,
        child: CachedNetworkImage(
          imageUrl: _imgUrl,
          width: widget.width,
          height: widget.height,
          fit: BoxFit.fitWidth,
          placeholder: (context, s) {
            return Image.asset('assets/images/placeholder.png');
          },
        ),
      ),
    );
  }
}
